<!-- 库存变更记录 -->
<template>
  <div class="stock_recode">
    <el-main class="base_main_content">
      <BackTitleView title="库存变更记录" />
      <div class="base_screen_header">
        <el-button type="primary" @click="openImport"
          >线下库存变更导入</el-button
        >
        <el-form :inline="true" class="base_search_form" @submit.prevent>
          <el-form-item>
            <el-date-picker
              v-model="date"
              type="daterange"
              range-separator="~"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              value-format="YYYY-MM-DD"
              @change="searchDate"
            />
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="type"
              @change="searchType"
              placeholder="请选择类型"
              clearable
            >
              <el-option
                v-for="(item, index) in typeOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="base"
              @change="searchBase"
              placeholder="请选择基地"
              clearable
            >
              <el-option
                v-for="(item, index) in baseOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="name"
              @keyup[native].enter="searchName"
              @change="searchName"
              placeholder="商品名称"
              :suffix-icon="Search"
              clearable
            />
          </el-form-item>
        </el-form>
      </div>
      <div class="base_main_header">
        <el-button type="primary" text @click="getExport">导出</el-button>
      </div>
      <DataCollectTable :data="data" :config="config" :total="total">
      </DataCollectTable>
    </el-main>
  </div>
</template>

<script setup>
import BackTitleView from "@com/BackTitleView.vue";
import DataCollectTable from "@com/table/DataCollectTable.vue";
import { ref } from "vue";
import { Search } from "@element-plus/icons-vue";
import useRoute from "@util/router";
import $ from "@util/base";
import api from "@api/goodsStock";

const route = useRoute();

const total = ref(0);
const data = ref([]);
const typeOptions = ref([]);
const baseOptions = ref([]);

const type = ref(route.query().type || "");
const base = ref(route.query().base || "");
const name = ref(route.query().name || "");

const date = ref(route.query().date || []);
function searchDate(val) {
  route.replaceQuery("date", val);
}

getConfig();
function getConfig() {
  api.base((val) => {
    baseOptions.value = val;
  });
  api.changeType((val) => {
    typeOptions.value = val;
  });
}

const config = {
  showIndex: true,
  column: [
    {
      label: "商品名称",
      prop: "productName",
    },
    {
      label: "规格名称",
      prop: "attrDetail",
      width: 180,
    },
    {
      label: "规格编码",
      prop: "skuCode",
      width: 140,
    },
    {
      label: "归属基地",
      prop: "shop",
      width: 100,
    },
    {
      label: "变更数量",
      prop: "changeNum",
      width: 120,
    },
    {
      label: "变更类型",
      prop: "changeTypeName",
      width: 120,
    },
    {
      label: "关联订单",
      prop: "changeInfo",
      width: 140,
    },
    {
      label: "变更时间",
      prop: "createTime",
      width: 150,
    },
    {
      label: "操作人",
      prop: "creator",
      width: 90,
    },
    {
      label: "备注",
      prop: "remark",
      width: 160,
    },
  ],
};

function searchType(val) {
  route.replaceQuery("type", val);
}

function searchBase(val) {
  route.replaceQuery("base", val);
}

function searchName(val) {
  route.replaceQuery("name", val);
}

function openImport() {
  route.push({ name: "offlinestockimport" });
}

getData();

route.watchRouter("goodsstockrecode", () => {
  getData();
});

function getData() {
  let routeQuery = route.query();
  api.stockChangeRecode(
    {
      changeType: routeQuery.type,
      shopCode: routeQuery.base,
      productName: routeQuery.name,
      sku: routeQuery.sku,
      date: routeQuery.date,
      page: routeQuery.p,
      size: routeQuery.s,
    },
    (val) => {
      data.value = val.itemList;
      total.value = val.total;
    }
  );
}

function getExport() {
  let routeQuery = route.query();
  api.stockChangeExport(
    {
      changeType: routeQuery.type,
      shopCode: routeQuery.base,
      productName: routeQuery.name,
    },
    (val) => {
      $.download(val.url, "库存变更记录导出");
    }
  );
}
</script>

<style lang="scss"></style>